{% extends 'base.html' %}
{% block css %}

{% endblock %}
{% block title %}
    数据库列表
{% endblock %}
{% block page-title %}
    数据库列表
{% endblock %}
{% block page-content %}
    <div class="col-lg-12">
            <ul class="nav nav-tabs">
                {% if perms.cmdb.view_host or perms.cmdb.view_database  %}
                <li class="">
                    <a href="{% url 'cmdb:overview' %}"  aria-expanded="false">
                        <span class="visible-xs"><i class="fa fa-home"></i></span>
                        <span class="hidden-xs">总览</span>
                    </a>
                </li>
                {% endif %}
                {% if perms.cmdb.view_host %}
                <li class="">
                    <a href="{% url 'cmdb:hosts' %}" aria-expanded="false">
                        <span class="visible-xs"><i class="fa fa-server"></i></span>
                        <span class="hidden-xs">主机</span>
                    </a>
                </li>
                {% endif %}
                {% if perms.cmdb.view_database %}
                <li class="active">
                    <a href="{% url 'cmdb:db' %}" aria-expanded="true">
                        <span class="visible-xs"><i class="fa fa-envelope-o"></i></span>
                        <span class="hidden-xs">数据库</span>
                    </a>
                </li>
                {% endif %}
            </ul>
            <div class="tab-content">
                <div class="tab-pane active" id="db">
                        {% if messages %}
                        {% for message in messages %}
                            <div class="alert alert-{{ message.tags }} alert-dismissable">
                                <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                                {{ message }}
                            </div>
                        {% endfor %}
                    {% endif %}
                    <div class="row" style="margin-bottom: 5px">
                        <div class="col-md-1">
                            {% if perms.cmdb.change_database %}
                                <button id="update-db-info" class="btn btn-primary btn-sm" title="同步阿里云，腾讯云的数据库资产到运维平台">同步资产</button>
                            {% endif %}
                        </div>
                        <div class="col-md-2" style="float: right">
                            <form class="form-horizontal" role="form">

                                    <div class="input-group">
                                        <input type="text" id="keyword" name="keyword" value="{{ keyword|default_if_none:'' }}" class="form-control" placeholder="关键字">
                                        <span class="input-group-btn">
                                        <button type="submit" class="btn btn-effect-ripple btn-primary">搜索</button>
                                        </span>
                                    </div>

                            </form>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12 col-sm-12 col-xs-12">
                            <table class="table table-bordered">
                                <thead>
                                    <tr>
                                        <th class="text-center">云类型</th>
                                        <th class="text-center">描述</th>
                                        <th class="text-center">CPU核数</th>
                                        <th class="text-center">内存大小</th>
                                        <th class="text-center">存储空间</th>
                                        <th class="text-center">最大IOPS</th>
                                        <th class="text-center">端口</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    {% for db in object_list %}
                                        <tr class="">
                                            <td class="text-center">{{ db.get_public_cloud_display }}</td>
                                            <td class="text-center" title="实例ID：{{ db.instance_id }}">{{ db.description }}</td>
                                            <td class="text-center"> {{ db.cpu }} </td>
                                            <td class="text-center"> {{ db.memory }} </td>
                                            <td class="text-center"> {{ db.storage }} </td>
                                            <td class="text-center"> {{ db.max_iops }} </td>
                                            <td class="text-center"> {{ db.port }} </td>
                                        </tr>
                                    {% empty %}
                                        <tr>
                                            <td colspan="11" class="text-center">没有数据库……</td>
                                        </tr>
                                    {% endfor %}
                                    </tbody>
                            </table>

                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-4">
                           <p style="margin-top: 10px"> 显示 [{{ page_obj.paginator.count }}] 条数据中的 第 [{{ page_obj.start_index }}] 至 [{{ page_obj.end_index }}] 的数据</p>
                        </div>
                        <div class="col-md-8">
                             {% if page_obj.paginator.num_pages > 1 %}
                                {% include '_paginator.html' %}
                             {% endif %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
{% endblock %}
{% block js %}
    <script>
        $(function () {
            $('#update-db-info').click(function () {
                $.get("/cmdb/update_db_info/", function (data) {
                    swal('Good', data, 'success')
                });
            })
        })
    </script>
    <script>
        $('.cmdb').addClass('active');
        $('.cmdb .assets').addClass('active');
    </script>
{% endblock %}
